<!--
    私播课
    梁
    2019年5月6日
    -->
<template lang="pug">
  kalix-master
    div.box
      div.top
        // 私播课条件筛选
        div.classify.clearfix
          span 所属院系
          ul
            li 学院1
            li 学院2
            li 学院3
            li 学院4
            li 学院5
            li 学院6
            li 学院7
            li 学院8
            li 学院9
            li 学院10
        div.classify.clearfix
          span 所属专业
          ul
            li 学院1
            li 学院2
            li 学院3
            li 学院4
            li 学院5
            li 学院6
            li 学院7
            li 学院8
            li 学院9
            li 学院10
        div.classify.clearfix
          span 课程类别
          ul
            li 公开课
            li 精品课
            li 微课
            li 直播课
            li 私播课
        div.classify.clearfix
          span 课程分类
          ul
            li 学院1
            li 学院2
            li 学院3
            li 学院4
            li 学院5
            li 学院6
            li 学院7
            li 学院8
            li 学院9
            li 学院10
        div.classify.clearfix
          span 课时
          ul
            li 学院1
            li 学院2
            li 学院3
            li 学院4
            li 学院5
            li 学院6
            li 学院7
            li 学院8
            li 学院9
            li 学院10
        div.classify.clearfix
          span 学分
          ul
            li 学院1
            li 学院2
            li 学院3
            li 学院4
            li 学院5
            li 学院6
            li 学院7
            li 学院8
            li 学院9
            li 学院10
        div.classify.clearfix
          span 课程年份
          ul
            li 2015
            li 2016
            li 2017
            li 2018
            li 2019
    div.xian
      // 私播课课程
    div.content.box
      div.option
        Sort
        div.condition
          span 已选条件:
          div.conditionBox 条件1
            span x
          div.conditionBox 条件2
            span x
        div.videoK
          div.videoBox(v-for="item in course")
            router-link(:to="{name: 'PrivateMore'}")
              div.videoImg
                img(:src="item.img" width="170px" height="120px")
                span.hour {{item.hour}}
                span.credit {{item.credit}}
              p.courseTitle {{item.courseTitle}}
              p.coursebrief {{item.coursebrief}}
            router-link(to="{name: 'index'}").more 查看更多→
</template>

<script>
  export default {
    data() {
      return {
        course: [
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          },
          {
            img: '/static/myCollect/u4578.png',
            hour: '课时',
            credit: '学分',
            courseTitle: '课程名称',
            coursebrief: '课程简介'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .box
    width 1200px
    margin 0 auto

  .top
    width 100%
    height 286px

  .classify
    margin-top 20px
    span
      display inline-block
      width 70px
      float left
      text-align right
      margin-right 38px
    ul
      -o-user-select none /*文字禁止被选中*/
      -moz-user-select none /*火狐 firefox*/
      -webkit-user-select none /*webkit浏览器*/
      -ms-user-select none /*IE10+*/
      -khtml-user-select none /*早期的浏览器*/
      user-select none
    li
      display inline-block
      width 70px
      text-align center
      float left
      margin 0 10px
      cursor pointer

  .xian
    width 100%
    height 5px
    box-shadow 0px 7px 7px #999

  .content
    margin-top 20px

  .condition
    display inline-block
    margin-left 25px
    width 800px
    span
      font-size 20px
      margin-right 26px

  .conditionBox
    display inline-block
    width 120px
    height 40px
    line-height 40px
    border 1px solid #FEC285
    border-radius 21px
    color #999999
    font-size 19px
    padding-left 23px
    box-sizing border-box
    margin-right 20px
    span
      margin-left 10px

  .videoK
    width 100%
    height 900px
    margin-top 20px
    .videoBox
      width 170px
      height 250px
      display inline-block
      margin 0 14px 20px 14px
      position relative
    .videoImg
      position relative
    .hour
      position absolute
      bottom 10px
      right 64px
      width 46px
      height 18px
      line-height 18px
      border-radius 11px
      text-align center
      background rgba(0, 0, 0, 0.5)
      color #fff
      font-size 12px
    .credit
      position absolute
      bottom 10px
      right 10px
      width 46px
      height 18px
      line-height 18px
      border-radius 11px
      text-align center
      background rgba(0, 0, 0, 0.5)
      color #fff
      font-size 12px
    .courseTitle
      font-size 18px
      margin 15px 0
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 1
    .coursebrief
      color #999
      overflow hidden
      text-overflow ellipsis
      display -webkit-box
      -webkit-box-orient vertical
      -webkit-line-clamp 3
      font-size 13px
      height 40px
    .more
      color #33A2FB
      position absolute
      bottom 10px
      left 0
    .more:hover
      text-decoration underline

</style>
